<template>
	<view class="wrap">
		<u-popup :show="show" @close="close" mode="top" :safeAreaInsetBottom="false" round="10">
			<view class="tab">
				<view class="menu" :style="index==0?'background-color: #F9F9F9;':''" v-for="(item,index) in tab"
					:key="index" @click="changeTab(item.type)">
					<view class="flex" style="align-items: center;">
						<img :src="item.icon" alt="">{{item.name}}
					</view>
					<u-icon name="checkbox-mark" v-if="type == item.type" color="#216DD9" size="28"></u-icon>
				</view>
			</view>
		</u-popup>
		<u-tabs :list="list" lineColor='#4787F0' @change="change" lineWidth="40" :activeStyle="{
            color: '#4787F0',
            fontWeight: 'bold',
        }">
			<view slot="right" style="margin-right: 20rpx;" @tap="hanleAdd">
				<u-icon name="list" size="21" bold></u-icon>
			</view>
		</u-tabs>
		<z-paging ref="paging" v-model="data" @query="queryList">
			<view class="list">
				<view class="item" v-for="(item,index) in data" :key="index">
					<view class="header">
						<view class="left">
							<img src="/static/images/Enterprise.png" alt="">
							<view>{{item.is_super==2?'加入企业申请':'创建企业申请'}}</view>
						</view>
						<view class="right">
							<view class="d" :class="item.status==5?'b':item.status==1?'g':'r'"></view>
							<view class="text">{{item.status_name}}</view>
						</view>
					</view>
					<view class="info">
						<view class="li">
							<text class="t1">企业名称：</text> <text class="t2">{{item.company_name}}</text>
						</view>
						<view class="li">
							<text class="t1">社会信用代码：</text> <text class="t2">{{item.company_org_code}}</text>
						</view>
						<view class="li">
							<text class="t1">手机号：</text> <text class="t2">{{item.cellphone}}</text>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		<view @click="toHref(2)" class="Add">企业<br />认证</view>
	</view>
</template>
<script>
	import {
		goNav
	} from "../../../../utils/common";
	import {
		enterpriseLog
	} from "../../../../api/module/enterprise.js";
	export default {
		components: {},
		data() {
			return {
				show: false,
				type: 1, //2-加入 1-企业
				tab: [{
					icon: '/static/images/auth.png',
					name: '企业认证',
					type: 1
				}, {
					icon: '/static/images/add.png',
					name: '加入企业',
					type: 2
				}],
				list: [{
					name: '全部',
					badge: {
						value: 0,
					},
					status: [1, 2, 3, 5]
				}, {
					name: '已审核',
					badge: {
						value: 0,
					},
					status: [1]
				}, {
					name: '未审核',
					badge: {
						value: 0,
					},
					status: [5]
				}],
				data: [],
				status: [1, 2, 3, 5]
			};
		},
		methods: {
			hanleAdd() {
				this.show = true
			},
			close() {
				this.show = false
			},
			change(e) {
				this.status = e.status
				this.$refs.paging.reload()
			},
			changeTab(type) {
				if (type == this.type) {
					this.type = '';
				} else {
					this.type = type
				}
				this.close()
				this.$refs.paging.reload()
			},
			queryList(pageNo, pageSize) {
				const that = this;
				let params = {
					page: pageNo,
					limit: pageSize,
					status_array: that.status,
					is_super: that.type
				}
				enterpriseLog(params).then(res => {
					that.$refs.paging.complete(res.data);
					that.list[0].badge.value = res.statistic.total
					that.list[1].badge.value = res.statistic.handleTotal
					that.list[2].badge.value = res.statistic.pendingTotal
				})
			},
			toHref(index) {
				this.close();
				goNav('/pages/my/Join-enterprise?type=' + index)
			}
		},
		onReady() {},
		onShow() {
			this.$refs.paging.reload()
		},
	};
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style scoped lang="scss">
	.wrap {
		min-height: 100vh;
		background-color: #F6F6F6;

		.tab {
			padding: 16rpx 20rpx;

			.menu {
				display: flex;
				align-items: center;
				border-radius: 8rpx;
				padding: 20rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				justify-content: space-between;

				image {
					width: 96rpx;
					height: 96rpx;
					margin-right: 16rpx;
				}
			}
		}

		:deep(.u-tabs) {
			background-color: #fff;
			width: 100%;

			.u-tabs__wrapper__nav__item {
				flex: 0 0 33.33333%;
			}
		}

		.list {
			padding: 24rpx 40rpx;

			.item {
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
				border-radius: 8rpx;
				position: relative;
				margin-bottom: 24rpx;

				::before {
					content: '';
					width: 20rpx;
					height: 20rpx;
					position: absolute;
					background-color: #f6f6f6;
					left: -10rpx;
					top: 70rpx;
					border-radius: 20rpx;
				}

				::after {
					content: '';
					width: 20rpx;
					height: 20rpx;
					position: absolute;
					background-color: #f6f6f6;
					right: -10rpx;
					top: 70rpx;
					border-radius: 20rpx;
				}

				.header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 80rpx;
					border-bottom: 2rpx dashed #ccc;

					.left {
						display: flex;
						align-items: center;
						font-weight: 400;
						font-size: 30rpx;
						color: rgba(0, 0, 0, 0.8);
						line-height: 80rpx;

						image {
							width: 27rpx;
							height: 31.5rpx;
							margin-right: 12rpx;
							margin-left: 46rpx;
						}
					}

					.right {
						display: flex;
						align-items: center;
						font-weight: 400;
						font-size: 28rpx;
						color: rgba(0, 0, 0, 0.9);
						line-height: 80rpx;

						.d {
							width: 14rpx;
							height: 14rpx;
							border-radius: 50%;
						}

						.r {
							background: #D93021;
						}

						.g {
							background: #1BB327;
						}

						.b {
							background: #4787F0;
						}

						.text {
							margin-left: 12rpx;
							margin-right: 32rpx;
						}
					}
				}

				.info {
					padding: 30rpx 40rpx;

					.li {
						color: #000;
						font-weight: 400;
						font-size: 28rpx;
						line-height: 40rpx;
						display: flex;
						align-items: center;
						margin-bottom: 16rpx;
						width: 100%;

						.t1 {
							width: 200rpx;
							color: rgba(0, 0, 0, 0.6);
						}

						.t2 {
							flex: 1;
						}

						text {
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}

					.li:last-child {
						margin-bottom: 0rpx;
					}
				}
			}
		}

		.Add {
			height: 100rpx !important;
		}
	}

	:deep(.z-paging-content) {
		top: 80rpx !important;
	}
</style>